<template>
    <div class="mainNewEmail">
      <el-card class="cardNewEmail">
          <div class="top-container-new">
            <div style="display: flex;">
                <el-text >标题:&nbsp;&nbsp;&nbsp;</el-text>
                <el-input placeholder="请输入标题" style="width: 80%;margin-left: 10px;" v-model="titleMessage"/>
            </div>
            <div style="display: column;"> 
                <div style="margin-top: 5px;">发件人:&nbsp;&nbsp;&nbsp;{{newMessageData.sender}}</div>
                <div style="margin-top: 5px;">收件人:&nbsp;&nbsp;&nbsp;{{newMessageData.recipient}}</div>
            </div>
          </div>
          <textarea class="newEmailText" placeholder="请输入正文内容" v-model="message"></textarea>
          <el-button class="addEmailBtn" type="primary" plain @click="writeLetter">发送</el-button>
      </el-card>
    </div>
</template>

<script>
import axios, { AxiosError } from 'axios'
export default {
    name:   'ReplyEmail',
    
    data(){
        return{
        newMessageData:{
            letter:'',
            msgType:0,
            sender:this.$route.params.sender,
            recipient:this.$route.params.recipient
        },
        titleMessage:'',
        message:''
        }
    },
    methods:{
      //使用结构赋值进行异常处理
      promise_error_process(promise){
            return promise.then(data=>[null,data])
                            .catch(err=>[err,null])
      },
      async writeLetterByAjax(){
          const response = await axios({
          url				      : 'http://127.0.0.1:8080/api/column/writeLetter',
          method			    : 'POST',
          withCredentials : true,
          headers			: {
                      'Content-Type'	: 'application/json'
                      },
          data : this.newMessageData    
          })
              return response
      },
      async writeLetter(){
          if(this.titleMessage === '')
            console.log('标题不能为空！')
          else if(this.message === '')
            console.log('正文内容不能为空！')
          else{
            this.newMessageData.letter = this.titleMessage+'/'+this.message
          const [err,result] = await this.promise_error_process(this.writeLetterByAjax())
          if(err)
              console.log(err)
          else
              console.log(result)
          }
        }
    }
}
</script>

<style scoped>
.mainNewEmail {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  position: absolute; /* 设置 test 为相对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.cardNewEmail{
  width: 80%;
  height: 60%;
}

.left-container-new{
  text-align: left;
}
.topicNew{
  font-weight: bold; /* 文本加粗 */
  font-size: 16px; /* 增大字体大小 */
}
.top-container-new{
  text-align: left;
}
.newEmailText{
    margin-top: 15px;
    width: 100%;
    height: 300px;
    border-color: #ccc;
    font-size: 18px;
}
.addEmailBtn{
    font-size: 20px;
    margin-top: 20px;
}
</style>